import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'
import Home from './pages/Home'
import About from './pages/About'

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <Header />
        <div className="d-flex align-items-start">
          <div className="nav flex-column nav-pills me-3">
            <MyNavLink to="/home" children="Home" />
            <MyNavLink to="/about" children="About" />
          </div>
          <div className="tab-content">
            {/* 注册路由 */}
            <Route path="/home" component={Home} />
            <Route path="/about" component={About} />
          </div>
        </div>
      </div>
    )
  }
}
